<template>
    <view class="food-detail">
        <view style="height: 20rpx"></view>
        <view class="redblack-main" style="padding: 0">
            <view class="redbloack-item" @click="godetail" style="align-items: flex-start">
                <image :src="foodDetail.coverAbsolute" mode=""></image>
                <view class="redblack-right">
                    <view class="right-title">{{ foodDetail.name }}</view>
                    <view class="right-tag"
                        ><text>
                            {{ title }}
                            <!-- {{ foodDetail.displayTypeName[typeId] }} -->
                        </text></view
                    >
                    <view class="right-bifo" style="margin: 0">
                        {{ foodDetail.foodHighFiber == 0 ? "" : "高纤维:" + foodDetail.foodHighFiber + "g  |"
                        }}{{ foodDetail.foodLowGi == 0 ? "" : "    低GI:" + foodDetail.foodLowGi + "   |"
                        }}{{ foodDetail.foodHighProtein == 0 ? "" : "   高蛋白:" + foodDetail.foodHighProtein + "g" }}
                    </view>
                </view>
            </view>
        </view>

        <view class="Nutrition">
            <view class="Nutrition-top">
                <view>热量和营养成分 <text>(每100g食物)</text></view>
                <navigator :url="'./nutrition?id=' + foodDetail.id" hover-class="none"
                    >大约需走{{ foodDetail.sportStep }}步
                    <image
                        src="https://smosun-minapp.oss-cn-shanghai.aliyuncs.com/weapp/img/icon-right.png"
                        mode=""
                    ></image
                ></navigator>
            </view>
            <view class="Nutrition-main">
                <view class="Nutrition-left">
                    <view class="Nutrition-left1">热量</view>
                    <view class="Nutrition-left2" v-if="falg"
                        ><text style="font-size: 72rpx; color: #234941; font-weight: bold">{{ foodDetail.heatKj }}</text
                        ><text>千焦</text></view
                    >
                    <view class="Nutrition-left2" v-else
                        ><text style="font-size: 72rpx; color: #234941; font-weight: bold">{{ foodDetail.heatKk }}</text
                        ><text>千卡</text></view
                    >
                    <view class="Nutrition-btn" @click="falg = true" v-if="!falg">切换到 千焦</view>
                    <view class="Nutrition-btn" @click="falg = false" v-else>切换到 千卡</view>
                </view>
                <view class="Nutrition-right">
                    <view class="Nutrition-left1" style="margin-bottom: 10rpx">供能比</view>
                    <view class="NutritionRight-item">
                        <view class="NutritionRight-title">蛋白质</view>
                        <view
                            style="display: flex; flex-direction: row; align-items: center"
                            class="NutritionRight-recent recent1"
                        >
                            <text :style="{ width: foodDetail.foodProtein * 0.7 + '%' }"></text>
                            <view style="float: right; position: absolute; right: 0"
                                >{{ foodDetail.foodProtein }}%</view
                            >
                        </view>
                    </view>
                    <view class="NutritionRight-item">
                        <view class="NutritionRight-title">脂肪</view>
                        <view
                            style="display: flex; flex-direction: row; align-items: center"
                            class="NutritionRight-recent recent2"
                        >
                            <text :style="{ width: foodDetail.foodFat * 0.7 + '%' }"></text>
                            <view style="float: right; position: absolute; right: 0">{{ foodDetail.foodFat }}%</view>
                        </view>
                    </view>
                    <view class="NutritionRight-item">
                        <view class="NutritionRight-title">碳水</view>
                        <view
                            style="display: flex; flex-direction: row; align-items: center"
                            class="NutritionRight-recent recent3"
                        >
                            <text :style="{ width: foodDetail.foodCarbonWater * 0.7 + '%' }"></text>
                            <view style="float: right; position: absolute; right: 0"
                                >{{ foodDetail.foodCarbonWater }}%</view
                            >
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            foodDetail: "",
            title: "",
            id: "",
            falg: false,
            foodTypeName: "",
            typeId: "",
        };
    },
    onLoad(options) {
        this.id = options.id;
        this.title = options.title;
        this.typeId = options.typeId;

        this.request.httpTokenRequest(`/mp-api/wx/food/details/${this.id}`, null, "POST", true).then((res) => {
            if (res.code == 0) {
                this.foodDetail = res.data;
                this.gotypeList();
            }
        });
    },
    methods: {
        gotypeList() {
            this.request.httpTokenJsonRequest("/mp-api/wx/food/typeList", null, "POST", true).then((res) => {
                if (res.code == 0) {
                    res.data.list.forEach((item) => {
                        if (item.id == this.foodDetail.foodTypeId) {
                            this.foodTypeName = item.name;
                        }
                    });
                }
            });
        },
        godetail() {
            uni.previewImage({
                urls: [this.foodDetail.coverAbsolute],
                current: 0,
            });
        },
    },
};
</script>

<style></style>
